<!doctype html>
<html lang="zh-HK">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>我的網站 — 範例（繁體中文 - 香港）</title>
  <meta name="description" content="這是一個以 zh-HK（繁體中文 - 香港）為主要語言的示範網站範本，包含首頁、關於、服務、作品與聯絡表單。">
  <meta name="keywords" content="網站, 範例, zh-HK, 香港, 繁體中文">
  <link rel="canonical" href="/">
  <meta property="og:title" content="我的網站 — 範例（繁體中文 - 香港）">
  <meta property="og:description" content="以香港繁體中文為主的網站範本，適合個人或小型商業使用。">
  <meta property="og:type" content="website">
  <!-- Favicon (可替換為你的圖示) -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <style>
    /* 簡潔的樣式：響應式、易修改 */
    :root{ --bg:#f7f7fb; --card:#ffffff; --accent:#0b61ff; --muted:#666; --radius:14px }
    *{box-sizing:border-box}
    body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Arial"; margin:0; background:var(--bg); color:#111}
    .container{max-width:1100px; margin:0 auto; padding:28px}
    header{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,#1e90ff,#6ab4ff);display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
    nav a{margin-left:18px;color:#222;text-decoration:none;font-weight:600}
    .hero{background:linear-gradient(180deg,rgba(11,97,255,0.08),transparent); padding:36px;border-radius:var(--radius);display:grid;grid-template-columns:1fr;gap:18px;margin:22px 0}
    .hero h1{margin:0;font-size:28px}
    .hero p{margin:0;color:var(--muted)}
    .btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:white;text-decoration:none;font-weight:700}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
    .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(20,20,40,0.04)}
    footer{margin-top:36px;color:var(--muted);font-size:14px}
    form label{display:block;margin:8px 0 6px;font-weight:600}
    input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e6ef}
    textarea{min-height:120px}
    .row{display:flex;gap:12px}
    @media(min-width:800px){ .hero{grid-template-columns:1fr 420px} }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="brand">
        <div class="logo">HK</div>
        <div>
          <div style="font-weight:800">我的網站</div>
          <div style="font-size:12px;color:var(--muted)">繁體（香港）範例</div>
        </div>
      </div>
      <nav aria-label="主要導覽">
        <a href="#home">首頁</a>
        <a href="#about">關於</a>
        <a href="#services">服務</a>
        <a href="#works">作品</a>
        <a href="#contact">聯絡</a>
      </nav>
    </header>

    <main>
      <section id="home" class="hero" aria-labelledby="hero-heading">
        <div>
          <h1 id="hero-heading">歡迎來到我的網站（Zh‑HK 範例）</h1>
          <p>這個範本使用繁體中文（香港）為主要語言，已設定語系與基本 SEO。你可以直接替換文字、圖片與連結，快速推出個人或公司簡介頁。</p>
          <p style="margin-top:12px"><a class="btn" href="#contact">立即聯絡</a></p>
        </div>
        <div class="card" aria-hidden="false">
          <h3 style="margin-top:0">亮點</h3>
          <ul style="padding-left:18px;margin:8px 0;color:var(--muted)">
            <li>lang 設為 zh-HK，內容採用繁體中文（香港）</li>
            <li>輕量、響應式設計，方便手機與桌面檢視</li>
            <li>包含關於、服務、作品、聯絡等常見區塊</li>
          </ul>
        </div>
      </section>

      <section id="about" style="margin-top:18px">
        <div class="card">
          <h2>關於我</h2>
          <p style="color:var(--muted)">您好，我是網站擁有者（或公司）。這裡可以放簡短自我介紹、使命宣言或品牌故事。建議 3–5 句，清楚說明您提供的價值與目標客群。</p>
        </div>
      </section>

      <section id="services" style="margin-top:18px">
        <h2>我們的服務</h2>
        <div class="grid">
          <div class="card">
            <h3>網頁設計</h3>
            <p style="color:var(--muted)">響應式網站、品牌整合、內容管理系統（CMS）整合。</p>
          </div>
          <div class="card">
            <h3>品牌與視覺設計</h3>
            <p style="color:var(--muted)">識別設計、名片、宣傳物料與社交媒體視覺。</p>
          </div>
          <div class="card">
            <h3>數碼行銷</h3>
            <p style="color:var(--muted)">SEO、內容策略、廣告投放與成效追蹤。</p>
          </div>
        </div>
      </section>

      <section id="works" style="margin-top:18px">
        <h2>部分作品</h2>
        <div class="grid">
          <div class="card">
            <strong>專案 A</strong>
            <p style="color:var(--muted)">簡短描述專案目標與成果，可放連結或截圖。</p>
          </div>
          <div class="card">
            <strong>專案 B</strong>
            <p style="color:var(--muted)">簡短描述專案目標與成果，可放連結或截圖。</p>
          </div>
          <div class="card">
            <strong>專案 C</strong>
            <p style="color:var(--muted)">簡短描述專案目標與成果，可放連結或截圖。</p>
          </div>
        </div>
      </section>

      <section id="contact" style="margin-top:18px">
        <div class="card">
          <h2>聯絡我們</h2>
          <p style="color:var(--muted)">留下訊息，我們會盡快回覆（通常工作日內）。</p>
          <form action="/send" method="POST" onsubmit="alert('模擬送出：請將 action 指向你的後端或使用第三方表單服務'); return false;">
            <label for="name">姓名</label>
            <input id="name" name="name" placeholder="請輸入您的姓名" required>

            <label for="email">電郵</label>
            <input id="email" name="email" type="email" placeholder="you@example.com" required>

            <label for="message">訊息</label>
            <textarea id="message" name="message" placeholder="請留下您的訊息"></textarea>

            <div style="margin-top:12px">
              <button class="btn" type="submit">送出</button>
            </div>
          </form>
        </div>
      </section>
    </main>

    <footer>
      <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
        <div>© <strong>我的網站</strong> • 保留一切權利</div>
        <div style="color:var(--muted)">語言：繁體中文（香港） — <a href="#" style="color:var(--accent);text-decoration:none">切換語言</a></div>
      </div>
    </footer>
  </div>

  <!-- 簡單腳本：可以放 analytics、表單驗證或多語切換邏輯 -->
  <script>
    // 範例：偵測使用者語言（僅示範）
    (function(){
      try{
        var userLang = navigator.language || navigator.userLanguage;
        console.log('User language:', userLang);
      }catch(e){}
    })();
  </script>
</body>
</html>